<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <script src="config.js"></script>
    <script src="util.js"></script>
    <script src="table.js"></script>
    <script src="database.js"></script>
    <script src="dist/jquery.min.js"></script>
    <title>flyfish</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div id="tips" class="tips"><span id="tips-msg"></span></div>
<!-------------------------------------- dbConfig cookie ------------------------------------------>
<div id="dbConfig" class="canvas">
    <p>数据库配置</p>
    <input id="dbConfig-type" style="width: 300px;height: 30px" type="text" autofocus="true" value="postgres/mysql">
    <br><br>
    <input id="dbConfig-ip" style="width: 300px;height: 30px" type="text" autofocus="true" placeholder="Ip">
    <input id="dbConfig-port" style="width: 100px;height: 30px" type="text" autofocus="true" placeholder="Port">
    <br><br>
    <input id="dbConfig-database" style="width: 300px;height: 30px" type="text" autofocus="true" placeholder="Database">
    <br><br>
    <input id="dbConfig-user" style="width: 300px;height: 30px" type="text" autofocus="true" placeholder="User">
    <input id="dbConfig-password" style="width: 200px;height: 30px" type="text" autofocus="true" placeholder="Password">
    <br><br>
    <p>flyfish配置</p>
    <input id="flyfish-ip" style="width: 300px;height: 30px" type="text" autofocus="true" placeholder="Ip">
    <input id="flyfish-port" style="width: 100px;height: 30px" type="text" autofocus="true" placeholder="Port">
    <br><br>
    <button onclick="testConnection()" style="width: 80px">测试链接</button>
    <button onclick="setDBConfig()" style="width: 80px">确认</button>
    <button onclick="document.getElementById('dbConfig').style.display='none';" style="width: 80px">取消</button>
</div>
<!-------------------------------------- dbConfig cookie ------------------------------------------>

<!-------------------------------------- 创建表 ------------------------------------------>
<div id="createTable" class="table">
    <input id="createTable-name" style="width: 500px;height: 30px" type="text" autofocus="true" placeholder="表名">
    <p>域名:类型(string;int;uint;float;blob;):默认值</p>
    <table id="createTable-table"></table>
    <br><br>
    <button onclick="mTable.insertRow()" style="width: 80px">加一行</button>
    <button onclick="createTable()" style="width: 80px">确认</button>
    <button onclick="document.getElementById('createTable').style.display='none';" style="width: 80px">取消</button>
</div>
<!-------------------------------------- 创建表 ------------------------------------------>

<!-------------------------------------- 新增列 ------------------------------------------>
<div id="addColumn" class="table">
    <p>域名:类型(string;int;uint;float;blob;):默认值</p>
    <table id="addColumn-table"></table>
    <br>
    <input id="addColumn-tableName" type="hidden">
    <button onclick="mTable.insertRow()" style="width: 80px">加一行</button>
    <button onclick="addColumn()" style="width: 80px">确认</button>
    <button onclick="document.getElementById('addColumn').style.display='none';" style="width: 80px">取消</button>
</div>
<!-------------------------------------- 新增列 ------------------------------------------>

<!-------------------------------------- 配置 ------------------------------------------>
<div id="showConf" class="table">
    <table id="showConf-table"></table>
    <br>
    <button onclick="document.getElementById('showConf').style.display = 'none'" style="width: 80px">确认</button>
</div>
<!-------------------------------------- 配置 ------------------------------------------>

<!-------------------------------------- 添加数据 ------------------------------------------>
<div id="addData" class="table">
    <table id="addData-table"></table>
    <br>
    <input id="addData-tableName" type="hidden">
    <button onclick="mTable.insertRow()" style="width: 80px">加一行</button>
    <button onclick="addData_()" style="width: 80px">确认</button>
    <button onclick="document.getElementById('addData').style.display = 'none'" style="width: 80px">取消</button>
</div>
<!-------------------------------------- 添加数据 ------------------------------------------>

<!-------------------------------------- 查询数据 ------------------------------------------>
<div id="queryData" class="table">
    <p id="queryData-tableName-show"></p>
    <input id="queryData-key" style="width: 300px;height: 30px" type="text" autofocus="true" placeholder="__key__">
    <button onclick="queryData_()" style="width: 80px">查询</button>
    <button onclick="delData_()" style="width: 80px">删除</button>
    <button onclick="document.getElementById('queryData').style.display = 'none'" style="width: 80px">关闭</button>
    <br><br>
    <table id="queryData-table"></table>
    <br>
    <input id="queryData-tableName" type="hidden">
    <button onclick="updateData_()" style="width: 80px">修改</button>

</div>
<!-------------------------------------- 查询数据 ------------------------------------------>

<!-------------------------------------- 表结构 ------------------------------------------>
<div id="structure" class="structure">
    <a href = "javascript:void(0)" style="margin-left: 90%" onclick = "document.getElementById('structure').style.display='none';">X</a>
    <p id="structure-innerHtml"></p>
</div>
<!-------------------------------------- 表结构 ------------------------------------------>

<!-------------------------------------- 表结构 ------------------------------------------>
<div id="structure" class="structure">
    <a href = "javascript:void(0)" style="margin-left: 90%" onclick = "document.getElementById('structure').style.display='none';">X</a>
    <p id="structure-innerHtml"></p>
</div>
<!-------------------------------------- 表结构 ------------------------------------------>

<div id="header">
    <div id="header-show"></div>
</div>
<div>
    <div id="menu">
        <div class="nav" ><button onclick="showCreateTable()" >New Table</button></div>
        <div class="nav" ><button onclick="dumpSql(false)" >Dump Sql: Structure only</button></div>
        <div class="nav" ><button onclick="dumpSql(true)" >Dump Sql: Structure + Data</button></div>

    </div>
    <div id="list">
        <div id="item-header">
            <div class="item-name">表名</div>
            <div class="item-conf">配置</div>
            <div class="item-number">数据</div>
            <div class="item-action">操作</div>
        </div>
        <hr>
        <div id="item-list"></div>
    </div>
</div>
<script>

    function showTips(msg,t) {
        let tip = document.getElementById('tips');
        tip.style.display = "block";

        let m = document.getElementById("tips-msg");
        m.innerText=msg;
        setTimeout(function(){ tip.style.display = "none"},t)
    }

    let dbConfig = "";
    let flyfishConfig = "";

    /********************************** onload start ******************************************************/
    window.onload = function () {
        dbConfig = util.getCookie("dbConfig");
        flyfishConfig = util.getCookie("flyfishConfig");

        if (dbConfig !== "" && flyfishConfig !== ""){
            headerShow();
            tableInfo();
        }else {
            let elem = document.getElementById("header-show");
            let str = `
<button onclick=\"document.getElementById('dbConfig').style.display='block';\" style="width: 100px;height: 23px;">配置数据库参数</button>`;
            elem.innerHTML = str;
        }

    };
    /********************************** onload end ******************************************************/

    /********************************** header-show start ******************************************************/
    function headerShow() {
        let elem = document.getElementById("header-show");
        let s = dbConfig.split("@");
        let f = flyfishConfig.split("@");
        let str = `<span id="db" style="font-size: 20px"> db : {0} | </span><span id="flyfish" style="font-size: 20px"> flyfish : {1}</span>
        <button onclick=\"document.getElementById('dbConfig').style.display='block';\" style="width: 70px;height: 22px;">重新配置</button>`;
        elem.innerHTML = util.format(str,util.format("{0} > {1} > {2} > {3}",s[0],util.format("{0}:{1}",s[1],s[2]),s[3],s[4]),
            util.format("{0}:{1}",f[0],f[1]));
    }
    /********************************** header-show end ******************************************************/

    /********************************** header-show start ******************************************************/
    function showConf(tableName) {
        document.getElementById("showConf").style.display = "block";
        let context = document.getElementById('showConf-table');
        let conf = database.confs.get(tableName);
        let headers = new Array("域名");
        for (let [key,item] of conf){
            headers.push(item.column)
        }
        mTable.new(context,headers);

        let tt = new Array({column:"域名",value:"类型"});
        let def = new Array({column:"域名",value:"默认值"});
        for (let [key,item] of conf){
            tt.push({column:item.column,value:item.tt})
        }
        for (let [key,item] of conf){
            def.push({column:item.column,value:item.def})
        }
        mTable.loadData([tt,def])
    }
    /********************************** header-show end ******************************************************/

    /********************************** dbConfig start ******************************************************/
    function checkConfig() {
        let tt = document.getElementById("dbConfig-type").value;
        if (tt !== "mysql" && tt !=="postgres" ){
            return ""
        }
        let ip = document.getElementById("dbConfig-ip").value;
        let port = document.getElementById("dbConfig-port").value;
        let database = document.getElementById("dbConfig-database").value;
        let user = document.getElementById("dbConfig-user").value;
        let password = document.getElementById("dbConfig-password").value;
        if (ip === "" || port === "" || database === "" || user === "" || password === "" ){
            return ""
        }

        return util.format("{0}@{1}@{2}@{3}@{4}@{5}",tt,ip,port,database,user,password);
    }

    function checkFlyfish() {
        let fip = document.getElementById("flyfish-ip").value;
        let fport = document.getElementById("flyfish-port").value;
        if (fip === "" || fport === "" ){
            return ""
        }
        return util.format("{0}@{1}",fip,fport);
    }

    function setDBConfig() {
        let dbc = checkConfig();
        let flyc = checkFlyfish();
        if (dbc === "" || flyc === ""){
            showTips("配置需填写完整",2000);
            return
        }
        dbConfig = dbc;
        util.setCookie("dbConfig",dbConfig,7);
        flyfishConfig = flyc;
        util.setCookie("flyfishConfig",flyfishConfig,7);
        document.getElementById('dbConfig').style.display='none';
        headerShow();
        tableInfo();
    }

    function testConnection() {
        let dbc = checkConfig();
        let flyc = checkFlyfish();
        if (dbc === "" || flyc === ""){
            showTips("配置需填写完整",2000);
            return
        }
        let url = httpAddr + "/testConnection";
        util.httpPost(url,{dbConfig:dbc,flyfishConfig:flyc}, function (res) {
            if(res.ok === 1){
                showTips("connection ok",2000)
            }else{
                showTips(res.msg,2000)
            }
        }, function (e) {
            showTips("网络错误!!",2000)
        })
    }

    /********************************** dbConfig end ******************************************************/

    /********************************** createTable start ******************************************************/
    function showCreateTable() {
        document.getElementById('createTable').style.display = "block";
        let context = document.getElementById('createTable-table');
        let header = new Array("域名","类型","默认值");
        mTable.new(context,header);
    }

    function createTable() {
        if (dbConfig === "" || flyfishConfig === ""){
            showTips("还未配置数据库",2000);
            return;
        }
        let tableName = document.getElementById("createTable-name").value;
        let confStr = util.dataToconfStr(mTable.getData());
        //console.log(confStr)
        if (confStr === "" || tableName === ""){
            showTips("填写错误",2000);
            return;
        }
        let url = httpAddr + "/createTable";
        let data = {dbConfig:dbConfig,flyfishConfig:flyfishConfig,tableName:tableName,fields:confStr};
        util.httpPost(url,data,function (res) {
            if(res.ok === 1){
                document.getElementById('createTable').style.display = "none";
                showTips("创建表成功",2000);
                tableInfo()
            }else{
                showTips(res.msg,2000)
            }
        },function (e){
            showTips("网络错误",2000)
        })
    }
    /********************************** createTable end ******************************************************/

    /********************************** tableInfo start ******************************************************/
    function tableInfo() {
        let url = httpAddr + "/tableInfo";
        util.httpPost(url,{dbConfig:dbConfig}, function (res) {
            if(res.ok === 1){
                showTableInfo(res.tables)
            }else{
                showTips(res.msg,2000)
            }
        }, function (e) {
            showTips("网络错误!!",2000)
        })
    }

    function showTableInfo(items) {
        tables = {};
        let tmp = `<div class="item">
                <div class="item-name">{0}</div>
                <div class="item-conf" onclick="showConf('{0}')">{1}</div>
                <div class="item-number">{2}</div>
                <div class="item-action">
                    <button onclick="showAddColumn('{0}')">新增一列</button>
                    <button onclick="addData('{0}')">添加数据</button>
                    <button onclick="queryData('{0}')">查询数据</button>
                </div>
            </div>
<hr>`;
        let list = document.getElementById('item-list');
        list.innerHTML = "";
        let str = "";
        for(let i = 0;i < items.length;i++) {
            let item = items[i];
            str += util.format(tmp, item.__table__, item.__conf__, item.count);
            database.confStr.set(item.__table__,item.__conf__);
            let conf = util.strToConf(item.__conf__);
            database.confs.set(item.__table__,conf);
        }
        list.innerHTML = str ;
        //console.log(12121212,tables)
    }
    /********************************** tableInfo end ******************************************************/

    /********************************** addColumn start ******************************************************/
    function showAddColumn(tableName) {
        document.getElementById('addColumn').style.display = "block";
        document.getElementById('addColumn-tableName').value = tableName;
        let context = document.getElementById('addColumn-table');
        let header = new Array("域名","类型","默认值");
        mTable.new(context,header);
    }

    function addColumn() {
        let confStr = util.dataToconfStr(mTable.getData());
        if (confStr === ""){
            showTips("填写错误",2000);
            return;
        }
        //console.log(confStr)
        let tableName = document.getElementById("addColumn-tableName").value;
        let url = httpAddr + "/addColumn";
        let data = {dbConfig:dbConfig,flyfishConfig:flyfishConfig,tableName:tableName,fields:confStr};
        util.httpPost(url,data,function (res) {
            if(res.ok === 1){
                document.getElementById('addColumn').style.display = "none";
                showTips("新增成功",2000);
                tableInfo()
            }else{
                showTips(res.msg,2000)
            }
        },function (e){
            showTips("网络错误",2000)
        })
    }
    /********************************** addColumn end ******************************************************/

    /********************************** addData start ******************************************************/
    function addData(tableName) {
        document.getElementById('addData').style.display = "block";
        document.getElementById('addData-tableName').value = tableName;
        let context = document.getElementById('addData-table');
        let header = new Array("__key__");
        let tt = new Array({column:"__key__",value:"string"});
        let conf = database.confs.get(tableName);
        for (let [k,item] of conf){
            header.push(item.column);
            tt.push({column:item.column,value:item.tt})
        }
        mTable.new(context,header);
        mTable.insertRow();
        mTable.loadData([tt]);
    }

    function addData_() {
        let tableName = document.getElementById('addData-tableName').value;
        let tableData = util.dataToDataMap(tableName,mTable.getDataLine2());
        if (tableData.length === 0){
            return
        }
        let data = {flyfishConfig:flyfishConfig,tableName:tableName,tableData:tableData};
        //console.log(data);
        util.httpPost(httpAddr+"/set",JSON.stringify(data),function (res) {
            if(res.ok === 1){
                document.getElementById('addColumn').style.display = "none";
                showTips("新增成功",2000);
                tableInfo()
            }else{
                showTips(res.msg,2000)
            }
        },function (e){
            showTips("网络错误",2000)
        })
    }

    /********************************** addData end ******************************************************/

    /********************************** queryData end ******************************************************/
    function queryData(tableName) {
        document.getElementById('queryData').style.display = "block";
        document.getElementById('queryData-tableName-show').innerHTML = tableName;
        document.getElementById('queryData-tableName').value = tableName;
        let context = document.getElementById('queryData-table');
        context.innerHTML = "";
    }

    function shewRet(key,item) {
        let context = document.getElementById('queryData-table');
        let header = new Array("__key__");
        let vv = new Array({column:"__key__",value:key});
        for (let i = 0; i< item.length;i++){
            header.push(item[i].column);
            vv.push({column:item[i].column,value:item[i].value})
        }
        mTable.new(context,header);
        mTable.loadData([vv]);
    }

    function queryData_() {
        let tableName = document.getElementById('queryData-tableName').value;
        let key = document.getElementById('queryData-key').value;
        if (key === ""){
            return
        }
        let data = {flyfishConfig:flyfishConfig,tableName:tableName,key:key};
        //console.log(data);
        util.httpPost(httpAddr+"/get",data,function (res) {
            if(res.ok === 1){
                //console.log(res.result);
                shewRet(key,res.result)
            }else{
                showTips(res.msg,2000)
            }
        },function (e){
            showTips("网络错误",2000)
        })
    }

    function updateData_() {
        let tableName = document.getElementById('queryData-tableName').value;
        let tableData = util.dataToDataMap(tableName,mTable.getData());
        if (tableData.length === 0){
            return
        }
        let data = {flyfishConfig:flyfishConfig,tableName:tableName,tableData:tableData};
        //console.log(data);
        util.httpPost(httpAddr+"/set",JSON.stringify(data),function (res) {
            if(res.ok === 1){
                showTips("修改成功",2000);
            }else{
                showTips(res.msg,2000)
            }
        },function (e){
            showTips("网络错误",2000)
        })
    }

    function delData_() {
        let tableName = document.getElementById('queryData-tableName').value;
        let key = document.getElementById('queryData-key').value;
        if (key === ""){
            return
        }
        let data = {flyfishConfig:flyfishConfig,tableName:tableName,key:key};
        //console.log(data);
        util.httpPost(httpAddr+"/del",data,function (res) {
            if(res.ok === 1){
                showTips("删除成功",2000)
                tableInfo()
            }else{
                showTips(res.msg,2000)
            }
        },function (e){
            showTips("网络错误",2000)
        })
    }

    function dumpSql(b) {
        if (dbConfig === "" || flyfishConfig === ""){
            showTips("还未配置数据库",2000);
            return;
        }
        let url = httpAddr + "/dumpSql";
        let data = {dbConfig:dbConfig,flyfishConfig:flyfishConfig,isGetData:b};
        util.httpPost(url,data,function (res) {
            if(res.ok === 1){
                let str = "";
                console.log(res.ret);
                $.each(res.ret,function (k,v) {
                    str += util.format(`\n{0}\n`,v);
                    console.log(k,v)
                });
                document.getElementById('structure').style.display = "block";
                document.getElementById('structure-innerHtml').innerText = str;
            }else{
                showTips(res.msg,2000)
            }
        },function (e){
            showTips("网络错误",2000)
        })
    }
</script>
</body>
</html>

